<template>
    <div class="icons">
        <swiper>
            <swiper-slide v-for="(page,index) of pages" :key="index">
                <div class="icon"  v-for="item of page" :key="item.id">
                    <div class="icon-img">                    
                        <img class="icon-img-content" :src="item.imgUrl"/>                
                    </div>
                    <p class="icon-desc">{{ item.desc }}</p>
                </div>
        </swiper-slide>
        </swiper>           
    </div>
</template>
<script>
export default{
    name:"HomeIcons",
    props:{
        iconList:Array
    },
    data() {
        return {
           
            
        }       

    },
    computed:{
            pages () {
               const pages = [];
               this.iconList.forEach((item,index) => {
                   const page = Math.floor( index / 8);
                   if(!pages[page]){
                       pages[page]=[];
                   }
                   pages[page].push(item)                 
               })
               return pages;
            } 
        }
}
</script>
//  icons 里的padding-bottom的意思是：width设置为100%，padding-bottom：50%是向下延伸为宽度的一半，
// icon 里的 width:25%,padding-bottom：25%,为高度和宽度一样
<style lang='stylus' scoped>
    @import '~styles/varibles.styl'
    .icons
        overflow :hidden        
        height :0       
        padding-bottom :50%         
        .icon
            width: 25%;
            height: 0;
            padding-bottom: 25%;
            overflow: hidden;
            float: left;
            position: relative;       
            .icon-img
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: .44rem;                                
                .icon-img-content
                    display :block
                    margin:0 auto
                    height :100%                    
            .icon-desc
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                line-height: .44rem;
                height: .44rem;
                text-align: center;          
</style>
